<template>
  <div>
    <!-- 网吧展示配置 -->
    <el-upload v-model:file-list="fileList" accept=".jpg,.png,.gif" :on-success="on_success" method="post" class="upload-demo" action="http://47.92.249.56:3006/upload?path=bar" :on-preview="handlePreview"
      :on-remove="handleRemove" :on-exceed="handleExceed">
      <el-button type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          仅支持 jpg/png/gif
        </div>
      </template>
    </el-upload>
    <el-table :data="bannerList" style="width: 100%">
      <el-table-column prop="id" label="id" width="80" />
      <el-table-column prop="src" label="图片">
        <template #default="scope">
          <el-image :src="scope.row.src" style="width: 192px; height: 108px;cursor: pointer;" @click="openPhotos(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="200">
        <template #default="scope">

          <el-popconfirm title="确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消" @confirm="del(scope.row)">
            <template #reference>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
    
    <script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import http from '../../../http'
import { layer } from '@layui/layui-vue'

const tableData = ref([])

const fileList = ref([])

const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

onMounted(() => {
  get_list()
})

const bannerList = ref([])
const get_list = async () => {
  const res = await http.website_corsApi('/imglist', 'get', { path: 'bar' })
  console.log(res)
  let newdata: any = []
  for (var i = 0; i < res.data.length; i++) {
    newdata.push({
      id: i,
      src: 'http://www.58shangcheng.cn/node/uploads/bar/' + res.data[i],
      name: res.data[i]
    })
  }

  bannerList.value = newdata
}

const on_success = async (response, uploadFile, uploadFiles) => {
  console.log(response)
  ElMessage.success(response.msg)

  await get_list()
}

const del = async (row) => {
  console.log(row)
  const res = await http.website_corsApi('/delete', 'post', { path: 'bar/' + row.name })
  console.log(res)
  if (res) {
    ElMessage.success(res.msg)
  }

  await get_list()

  // axios.post('http://localhost:3006/delete',{path:'material/'+row.name})
}

const openPhotos = function (row) {
  layer.photos({
    imgList: [
      {
        src: row.src,
        alt: '图片'
      }
    ]
  })
}

defineExpose({
  get_list
})
</script>
     
    <style scoped>
</style>